<template>
  <div class="positiveList">
    <div class="searchBox">
      <el-form :inline="true" :model="formInline">
        <el-form-item label="姓名">
          <el-input size="small" clearable v-model="formInline.name" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="小区名称">
          <el-select filterable clearable size="small" v-model="formInline.community" placeholder="请选择">
            <el-option
              v-for="item in optionsList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="当前状态">
          <el-select size="small" clearable v-model="formInline.status" placeholder="请选择">
            <el-option label="未转运" :value="1"></el-option>
            <el-option label="已转运" :value="2"></el-option>
            <el-option label="已治愈" :value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="small" @click="handleSearch">搜索</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>查询列表</span>
        <span style="color: #D9001B;margin-left: 20px">阳性总人数：{{total.yangNum}}</span>
        <span style="color: #D9001B;">未转运总人数：{{total.notTransportNum}}</span>
        <div class="btnBox">
          <el-button size="small" type="primary" @click="exportYangPersonal">导出</el-button>
        </div>
      </div>
      <div>
        <el-table
          header-cell-class-name="header-class"
          :data="tableData"
          border>
          <el-table-column
            prop="homeName"
            label="居住地址"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            prop="userName"
            label="姓名"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            prop="phoneNumber"
            label="手机号码">
          </el-table-column>
          <el-table-column
            prop="userStatus"
            label="当前状态">
            <template slot-scope="{row}">
              <span v-if="row.userStatus==1">未转运</span>
              <span v-if="row.userStatus==2">已转运</span>
              <span v-if="row.userStatus==3">已治愈</span>
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            width="120">
            <template slot-scope="{row}">
              <el-button type="text" size="small" @click="view(row)">查看</el-button>
              <el-button v-if="row.userStatus==1" type="text" size="small" @click="handleCommit(2,row)">转运登记</el-button>
              <el-button v-if="row.userStatus==2" type="text" size="small" @click="handleCommit(3,row)">治愈登记</el-button>
            </template>
          </el-table-column>
        </el-table>
        <Pagination :total="page_total" @pageChange="pageChange" :page="page"></Pagination>
      </div>
    </el-card>
    <el-dialog
      :title="title"
      v-if="dialogVisible"
      :visible.sync="dialogVisible"
      width="400px">
      <span>
        <el-form ref="ruleForm" v-if="title==='转运登记'" :model="form" label-width="100px">
          <el-form-item
            prop="transportTime"
            label="转运日期："
            :rules="[{ required: true, message: '请选择转运日期', trigger: 'change' }]">
            <el-date-picker
              size="small"
              v-model="form.transportTime"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="转运地点：">
            <el-input size="small" v-model="form.transportPlace" placeholder="请输入"></el-input>
          </el-form-item>
        </el-form>
        <el-form ref="ruleForm" v-else :model="form" label-width="100px">
          <el-form-item
            prop="homeTime"
            label="回家日期："
            :rules="[{ required: true, message: '请选择回家日期', trigger: 'change' }]">
            <el-date-picker
              size="small"
              v-model="form.homeTime"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="备注：">
            <el-input size="small" v-model="form.remarks" placeholder="请输入"></el-input>
          </el-form-item>
        </el-form>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogVisible = false">取 消</el-button>
        <el-button size="small" type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import {exportExcel} from '../../utils/util'

  export default {
    name: "positiveList",
    data() {
      return {
        formInline: {name: '', community: '', status: ''},
        tableData: [],
        total: {},
        title: '',
        optionsList: [],
        dialogVisible: false,
        page: {
          page_index: 1,
          page_limit: 10
        },
        page_total: 0, //总条数
        form: {},
        currentId: null,//转运治愈人员id
      }
    },
    methods: {
      pageChange(item) {
        this.page.page_index = item.page_index;
        this.page.page_limit = item.page_limit;
        this.init()//改变页码，重新渲染页面
      },
      init() {
        let params = {
          pagerNum: this.page.page_index,
          pageSize: this.page.page_limit,
          ...this.formInline,
        }
        this.$ajax.peng.queryYangPersonal(params).then(data => {
          this.tableData = data.data.records
          this.page_total = data.data.total
        })
      },
      handleSearch() {
        this.page.page_index = 1
        this.init()
      },
      view(row) {
        this.$router.push({name: 'positiveInfo', query: {userId: row.userId}})
      },
      //查询所有小区
      getSubBuildList() {
        let params = {
          level: 1,
        }
        this.$ajax.peng.getSubBuildList(params).then(data => {
          this.optionsList = data.data
        })
      },
      //查询阳性人数未转运人数数量
      queryYangNum() {
        this.$ajax.peng.queryYangNum().then(data => {
          this.total = Object.assign(this.total, data.data)
        })
      },
      //打开转运治愈登记
      handleCommit(status, row) {
        this.dialogVisible = true
        this.currentId = row.userId
        if (status === 2) {
          this.title = '转运登记'
        } else if (status === 3) {
          this.title = '治愈登记'
        }
      },
      //提交转运登记
      submit() {
        this.$refs.ruleForm.validate((valid) => {
          if (valid) {
            if (this.title === '转运登记') {
              let params = {
                id: this.currentId,
                status: 2,
                transportTime: this.form.transportTime,
                transportPlace: this.form.transportPlace,
              }
              this.$ajax.peng.personalStatusCommit(params).then(data => {
                this.$message.success('登记成功')
                this.dialogVisible = false
                this.init()
              })
            } else {
              //治愈登记提交
              let params = {
                id: this.currentId,
                status: 3,
                homeTime: this.form.homeTime,
                remarks: this.form.remarks,
              }
              this.$ajax.peng.personalStatusCommit(params).then(data => {
                this.$message.success('登记成功')
                this.dialogVisible = false
                this.init()
              })
            }
          }
        });
      },
      //导出
      exportYangPersonal() {
        this.init()
        let params = {
          ...this.formInline,
        }
        this.$ajax.peng.exportYangPersonal(params).then(data => {
          exportExcel(data,'阳性居民.xls')
        })
      }
    },
    mounted() {
      this.init()
      this.getSubBuildList()
      this.queryYangNum()
    },
  }
</script>

<style lang="scss">
  .positiveList {
    .el-card__header {
      padding: 13px 20px;
      line-height: 30px;
    }

    .el-form .el-input {
      width: 220px;
    }
  }
</style>
